<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item :name="item.id" v-for="item in questionList" :key="item.question">
        <template #title>
          <div slot="title" class="flex items-center">
            <div class="size-8 bg-primary text-white rounded leading-8 font-bold text-lg">问</div>
            <h2 class="ml-3" :class="{ 'text-primary': activeNames == item.id }">{{ item.question }}</h2>
          </div>
        </template>
        <div class="flex items-start bg-neutral-100 p-4 lg:px-8 lg:py-5">
          <div class="size-8 bg-neutral-400 text-white rounded leading-8 font-bold text-lg text-center">答</div>
          <div v-html="item.answer" class="ml-3 mt-1 flex-1"></div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
const activeNames = ref(1);
// 使用 useAsyncData 请求 /api/question 接口，获取问题列表
const { data: result } = await useAsyncData("questionList", () => {
  return useFetch("/api/question", { params: { page: 1, pageSize: 10 } }).then((res) => res.data.value);
});
const res = result.value as any;
console.log(res);
const questionList = ref(res.data);
</script>
